<template>
  <div class="login">
    <div class="l-top">
      <h2>UNI-ADMIN</h2>
    </div>
    <div class="l-main">
      <input type="text" v-model="form.username" placeholder="请输入用户名" />
      <input type="password" v-model="form.password" placeholder="请输入密码" />
      <button @click="login">立即登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      if (this.form.username == "" || this.form.password == "") {
        alert("输入不能为空，请输入用户信息！");
      } else {
        this.$axios({
          url: "http://ceshi5.dishait.cn/admin/login",
          method: "post",
          data: {
            username: this.form.username,
            password: this.form.password,
          },
        })
          .then((res) => {
            console.log(res.data);
            if(this.form.username==res.data.data.username){
                alert('恭喜你登录成功！');
                this.$store.commit('userchange',this.form);
                this.$router.push('/home')
            }else{
                alert('用户信息输入错误！请重新输入！')
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
  beforeMount(){
    this.$store.commit('changeshow',{type:'login',flag:false})
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 40%;
  height: 30vw;
  border: 1px solid gainsboro;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .l-top {
    width: 100%;
    height: 5vw;
    border-bottom: 1px solid gainsboro;
    h2 {
      color: rgb(122, 121, 121);
      line-height: 5vw;
    }
  }
  .l-main {
    padding: 0 3vw;
    input {
      width: 100%;
      height: 3vw;
      margin-top: 3vw;
    }
    button {
      width: 100%;
      height: 3vw;
      background-color: #027677;
      color: #fff;
      margin-top: 3vw;
      outline: 0;
      border: 0;
      border-radius: 3px;
    }
  }
}
</style>